import React from'react';
import { useState, useEffect } from 'react';
import { Button, SearchBar, Space, Toast } from 'antd-mobile'
import { InfiniteScroll, List } from 'antd-mobile'
import axios from 'axios'
import { Navigate } from 'react-router-dom';
  const categories = [
    '首页', '动画', '番剧', '国创', '音乐', '舞蹈'
  ];
  
  const moreCategories = [
    '舞蹈选项1', '舞蹈选项2', '舞蹈选项3', '舞蹈选项4'
  ];
export default function Lists(){
    const [is_true,set_true]=useState(false)
    const [Lists,setList]=useState([])
    const [selectType,setType]=useState('首页')
    const [page,setPage]=useState(1)
    const handleChange=()=>{
        set_true(!is_true)
    }
    useEffect(()=>{
       const getList=async()=>{
        const res=await axios.get('http://localhost:3000/list')
        console.log(res.data);
        setList(res.data)
       }
       getList()
    },[])
    const handleType=async(type)=>{
        setType(type)
        const res=await axios.get('http://localhost:3000/list')
        let newList=type==='首页'?res.data:res.data.filter(item=>item.type===type)
        setList(newList)
        setPage(1)
    }
    const getList=async()=>{
        const res=await axios.get('http://localhost:3000/list',{
            params:{
                page:page+1,
                type:selectType,
                limit:2
            }
        })
        const newData=res.data
        setList([...Lists,...newData])
        setPage(page+1)
    }

    return(
        <div>
            <h1>bilibili <a href="/search">🔍</a></h1>
            <div style={{display:'flex'}}>
                {categories.map(item=>(
                    <div key={item} style={{width:'100px'}} className={selectType===item?'active':''} onClick={()=>handleType(item)}>{item}</div>
                ))}
                <button style={{width:'100px'}} onClick={handleChange}>
                    {is_true?'收起':'展开'}
                </button>
            </div>
            {is_true && (
                <div>
                    {moreCategories.map(item=>(
                        <div key={item} style={{width:'100px'}} className={selectType===item?'active':''} onClick={()=>handleType(item)}>{item}</div>
                    ))}
                </div>
            )}
            <List>
                {Lists.map((item,index)=>(
                    <List.Item key={index}>
                        <img src={item.img} alt="" />
                        <p>{item.title}</p>
                    </List.Item>
                ))}
            </List>
            <InfiniteScroll loadMore={()=>getList()} hasMore={page<2}></InfiniteScroll>
        </div>
    )
}